﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="problemtest.aspx.cs" Inherits="problemtest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <%--<style type="text/css">
        #Background
        {
            position: fixed;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            background-color: Gray;
        }
        #Progress
        {
            position: fixed;
            top: 10%;
            left: 10px;
            width: 300px;
            height: 50px;
            text-align: center;
            background-color: White;
            border: solid 3px black;
        }
    </style>--%>
    <style type="text/css">
        .middleblowpage
        {
            animation:move 5s infinite;
            -webkit-animation:move 5s infinite; 
            animation-name:move;
            -webkit-animation-name:move;
            animation-duration:2s;
            -webkit-animation-duration:2s;
            animation-timing-function:linear;
            -webkit-animation-timing-function:linear;
            animation-delay:2s;
            -webkit-animation-delay:2s;
            animation-iteration-count:infinite;
            -webkit-animation-iteration-count:infinite;
            animation-direction:alternate;
            -webkit-animation-direction:alternate;                        
        }
        @keyframes move
        {
            from { height:110px; width:140px;}
            to {height:110px; width:140px;transform: rotateZ(-2deg);}
        }
        @-webkit-keyframes move /* Safari and Chrome */
        {
            from {height:110px;width:140px;}
            to {height:110px;width:140px;-webkit-transform: rotateZ(-2deg);}
        }
        .blowpage
        {
            animation:mymove 5s infinite;
            -webkit-animation:mymove 5s infinite; 
            animation-name:mymove;
            -webkit-animation-name:mymove;
            animation-duration:2s;
            -webkit-animation-duration:2s;
            animation-timing-function:linear;
            -webkit-animation-timing-function:linear;
            animation-delay:2s;
            -webkit-animation-delay:2s;
            animation-iteration-count:infinite;
            -webkit-animation-iteration-count:infinite;
            animation-direction:alternate;
            -webkit-animation-direction:alternate;                        
        }
        @keyframes mymove
        {
            from { height:20px; width:146px;}
            to {height:20px; width:146px;transform: rotateZ(-3deg);}
        }
        @-webkit-keyframes mymove /* Safari and Chrome */
        {
            from {height:20px;width:146px;}
            to {height:20px;width:146px;-webkit-transform: rotateZ(-3deg);}
        }
        .roundeddiv
        {
            -moz-border-radius: 0.5em 0.5em 0em 0em;
            -webkit-border-radius: 0.5em 0.5em 0em 0em; 
            border-radius: 0.5em 0.5em 0em 0em;
        }
        .blink_me 
        {
            animation-name: blinker; 
            animation-duration: 4s;       
            animation-timing-function: linear;
            animation-iteration-count: infinite;    
            -webkit-animation-name: blinker;    	    
	        -webkit-animation-iteration-count: infinite;
	        -webkit-animation-duration: 4s; 
	        -webkit-animation-timing-function: linear;      	    
        }
        @keyframes blinker{from{text-shadow:-1px 0px;}to{text-shadow:1px 1px;}} 
        @-webkit-keyframes blinker{from{text-shadow:-1px 0px;}to{text-shadow:1px 1px; }} 
    </style>
    <script type="text/javascript">
        function closediv() {
            document.getElementById("mainback").style.display = 'none';
        }
        function closediv2() {
            document.getElementById("mainsecond").style.display = 'none';
        }
        function closediv3() {
            document.getElementById("pnlview").style.display = 'none';
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table width="100%">
            <tr>
                <td>
                    <div id="mainback" class="roundeddiv" style="height: 160px; width: 146px;">
                        <div class="roundeddiv" align="right" style="height: 40px; background-color: #ECE9D9;">
                            <img src="Images/push-pin.png" height="20px" />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="Images/close.png"
                                onclick="closediv();" />&nbsp;&nbsp;&nbsp;</div>
                        <div class="middleblowpage" style="background-color: #ECE9D9; height: 110px; width: 140px;
                            padding: 3px; color: blue; margin-top: -10px; font-family: Verdana; font-size: small;">
                            Wix provides 100s of fully-customizable, designer-made templates. Use the powerful
                            drag n’ drop.
                        </div>
                        <div id="roundeddiv" class="blowpage" style="background-color: #ECE9D9; height: 20px;
                            width: 146px; margin-top: -4px;">
                            <div style="color: blue;" align="right">
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    
                </td>
                <td>
                    <style type="text/css">
                    .shake
                    {
                        animation-name: Shaker;
                        animation-duration: 2s;
                        animation-timing-function: linear;
                        animation-iteration-count: infinite;    
                        -webkit-animation-name: Shaker;	  
	                    -webkit-animation-iteration-count: infinite;
	                    -webkit-animation-duration: 2s;
	                    -webkit-animation-timing-function: linear;    	                    
                    }
                    @keyframes Shaker{from{background-color:#ECE9D9; Width:140px; height:130px; font-size:small;}to{background-color:#ECE9D9; Width:140px; padding:3px; height:130px; font-size:medium; }} 
                    @-webkit-keyframes Shaker{from{background-color:#ECE9D9;Width:140px; height:130px; font-size:small;}to{background-color:#ECE9D9; Width:140px; padding:3px;  height:130px; font-size:medium;}}
                </style>
                    <div id="mainsecond" style="height: 160px; width: 146px;">
                        <div class="roundeddiv" align="right" style="height: 40px; background-color: #ECE9D9;">
                            <img src="Images/push-pin.png" height="20px" />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="Images/close.png"
                                onclick="closediv2();" />&nbsp;&nbsp;&nbsp;</div>
                        <div class="shake" style="background-color: #ECE9D9; height: 130px; width: 140px;
                            padding: 3px; color: blue; margin-top: -10px; font-family: Verdana; font-size: small;">
                            Wix provides 100s of fully-customizable, designer-made templates. Use the powerful
                            drag n’ drop.
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                <style type="text/css">
                     .rotateimage 
                     { 
                        -moz-transform:rotate(-30deg);
                        -webkit-transform:rotate(-30deg);
                        transform:rotate(-30deg);
                     }
                     .rounddiv
                     {
                        -moz-border-radius: 2em 2em 1em 1em;
                        -webkit-border-radius: 2em 2em 1em 1em; 
                        border-radius: 2em 2em 1em 1em;
                     }
                    .blink_me 
                    {
                        animation-name: blinker; 
                        animation-duration: 8s;       
                        animation-timing-function: linear;
                        animation-iteration-count: infinite;    
                        -webkit-animation-name: blinker;    	    
	                    -webkit-animation-iteration-count: infinite;
	                    -webkit-animation-duration: 8s; 
	                    -webkit-animation-timing-function: linear;      	    
                    }
                    @keyframes blinker{0%,100%{text-shadow:-1px 0px;font-size:14px; }50%{text-shadow:2px 1px; font-size:16px }} 
                    @-webkit-keyframes blinker{0%,100%{text-shadow:-1px 0px;font-size:14px; }50%{text-shadow:2px 1px;font-size:16px; }} 
                    .shake
                    {
                        animation-name: Shaker;
                        animation-duration: 5s;
                        animation-timing-function: linear;
                        animation-iteration-count: infinite;    
                        -webkit-animation-name: Shaker;	  
	                    -webkit-animation-iteration-count: infinite;
	                    -webkit-animation-duration: 5s;
	                    -webkit-animation-timing-function: linear;       
                    }
                    @keyframes Shaker{0%,100%
                    {            
                        background-color:#ECE9D9;             
                        Width:200px; height:140px;
            
                    }50%
                    {            
                        background-color:#ECE9D9; 
                        Width:210px; padding:6px; height:150px; 
                    }} 
                    @-webkit-keyframes Shaker{0%,100%
                    {
                        background-color:#ECE9D9;             
                        Width:200px; height:140px;
                    }
                    50%
                    {            
                        background-color:#ECE9D9; 
                        Width:210px; padding:6px;  height:150px;         
                    }}        
                    .arrow-w
                    { 
                        width: 0px;
                        height: 0px;            
                        border-style: solid;
                        border-width: 5px 5px 50px 10px;
                         border-color: transparent transparent #ECE9D9 transparent;
                        line-height: 0px;
                        -moz-transform:rotate(30deg);
                        -webkit-transform:rotate(30deg);
                        _border-color: #000000 #000000 #000000 #000000;
                        _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
                    }         
                </style>
                    <div id="pnlview" runat="server" align="left" style="width: 200px;" class="rounddiv">
                        <div class="arrow-w" style="margin-left: 150px;">
                            <div id="imgclose" class="rotateimage"><img src="Images/close.png" onclick="closediv3();" /></div>
                        </div>
                        <div id="swingdiv" class="shake" style="height: 140px; width: 200px; margin-top: -12px;">
                            <div class="blink_me" style="text-align: center; font-size: 14px;">
                                <br />
                                <div>
                                    Anyway, when I run this on my local server none of the data that I am trying to
                                    display in the table appears.My .html file and .xml file are in the same folder.
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
